<script lang="ts" setup>
import { watch, ref, defineProps, defineEmits } from "vue";
import { useRoute } from "vue-router";
import { PostProps, ColumnProps } from "@/share/propsType";
import useScrollToEnd from "@/share/hooks/scrollToEnd";
import { formatTime } from "@/share/helper";
import { getPostsList } from "@/api/api";
import ImgModel from "@/components/ImgModel.vue";

    const props = defineProps<{
      list: PostProps[],
      scrollToEndCb: Function
    }>();
    const emit = defineEmits(['get-more-posts', 'scroll-to-end'])
    const route = useRoute(); // route的信息
    const columnid = route.params.id; // 变成字符串
    const columnList = ref<ColumnProps[]>([]);
    const isScrollToEnd = useScrollToEnd("#app");
    let page = 1;
    const size = 3;
    let total = 0;

    function getMorePost() {
      emit("get-more-posts");
    }

    // 到底加载
    function getMorePosts() {
      if (total !== 0 && size * page >= total) {
        return;
      }
      page++;
      getPostsList({ columnid, page, size }).then((res) => {
        columnList.value = res.list.concat(columnList.value);
      });
    }

    watch(isScrollToEnd, (n, o) => {
      console.log("watch isScrollToEnd", n, o);
      if (!n) {
        getMorePosts();
      }
    });

    getPostsList({ columnid, page, size }).then((res) => {
      columnList.value = res.list;
      total = res.total;
    });

</script>

<template>
  <div class="post-list">
    <article v-for="post in columnList" :key="post._id" class="card">
      <div class="card-body">
        <h4 class="post-title">
          <router-link :to="{ name: 'post', params: { id: post._id } }">{{
            post.title
          }}</router-link>
        </h4>

        <div class="post-body clear">
          <div class="post-img">
            <ImgModel
              :imgUrl="post.image"
              :desAlt="post.title"
              width="200px"
              height="200px"
            ></ImgModel>
          </div>

          <p class="post-content">
            {{ post.content }}
          </p>
        </div>

        <span class="post-time">{{ formatTime(post.createdAt) }}</span>
      </div>
    </article>
    <!-- 划到底部 -->
    <h1 v-if="isScrollToEnd">划到底部了...</h1>
  </div>
</template>
<style scoped lang="scss">
$post-height: 1.7em;
$content-height: $post-height * 7;
.card {
  margin: 0 10px 20px 10px;
  border: 1px solid rgba(0, 0, 0, 0.125);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  border-radius: 0.25rem;
  &:hover {
    transform: scale(1.01);
  }
}
.card-body {
  padding: 20px;
}
.el-tag {
  margin-right: 10px;
  cursor: pointer;
}
.post-title {
  margin-bottom: 10px;
}
.post-title a {
  text-decoration: none;
  color: #1a1a1a;
  font-size: 20px;
  &:hover {
    color: #0d6efd;
  }
}
.post-body {
  margin-bottom: 20px;
}
.post-img {
  width: 200px;
  max-height: 200px;
  overflow: hidden;
  float: left;
  box-shadow: 1px 1px 4px 0px #8a8a8a;
  
  img {
    width: 100%;
  }
}
.post-content {
  margin-top: 10px;
  padding-left: 60px;
  line-height: $post-height;
  margin-left: 20px;
  max-height: $post-height * 7;
  text-overflow: ellipsis;
  word-break: break-all;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}
.post-time {
  color: #6c757d;
}
</style>
